<template>
	<view class="water-quality-card">
		<view class="card-header">
			<text class="card-title">{{ title }}</text>
			<view class="quality-badge" :class="qualityLevel">
				<text class="quality-text">{{ qualityText }}</text>
			</view>
		</view>
		<view class="card-content">
			<view class="data-item" v-for="(item, index) in dataList" :key="index">
				<view class="data-icon" :class="item.type">
					<uni-icons :type="item.icon" size="20" :color="item.color"></uni-icons>
				</view>
				<view class="data-info">
					<text class="data-label">{{ item.label }}</text>
					<text class="data-value">{{ item.value }}{{ item.unit }}</text>
				</view>
				<view class="data-status" :class="item.status">
					<text class="status-text">{{ getStatusText(item.status) }}</text>
				</view>
			</view>
		</view>
		<view class="card-footer" v-if="showFooter">
			<text class="update-time">最后更新: {{ updateTime }}</text>
			<uni-icons type="refresh" size="16" color="#007aff" @click="onRefresh"></uni-icons>
		</view>
	</view>
</template>

<script setup>
import { computed } from 'vue'

// 定义props
const props = defineProps({
	title: {
		type: String,
		default: '水质数据'
	},
	dataList: {
		type: Array,
		default: () => []
	},
	qualityLevel: {
		type: String,
		default: 'good'
	},
	updateTime: {
		type: String,
		default: '刚刚'
	},
	showFooter: {
		type: Boolean,
		default: true
	}
})

// 定义emits
const emit = defineEmits(['refresh'])

// 计算属性
const qualityText = computed(() => {
	const levelMap = {
		excellent: '优秀',
		good: '良好',
		fair: '一般',
		poor: '较差'
	}
	return levelMap[props.qualityLevel] || '未知'
})

// 获取状态文本
const getStatusText = (status) => {
	const statusMap = {
		normal: '正常',
		warning: '警告',
		error: '异常'
	}
	return statusMap[status] || '未知'
}

// 刷新事件
const onRefresh = () => {
	emit('refresh')
}
</script>

<style lang="scss" scoped>
.water-quality-card {
	background-color: #ffffff;
	border-radius: 10rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.card-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
}

.quality-badge {
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	
	&.excellent {
		background-color: #e8f5e8;
		color: #4cd964;
	}
	
	&.good {
		background-color: #e8f5e8;
		color: #91cc75;
	}
	
	&.fair {
		background-color: #fff3e0;
		color: #f0ad4e;
	}
	
	&.poor {
		background-color: #ffebee;
		color: #dd524d;
	}
}

.quality-text {
	font-size: 22rpx;
	font-weight: bold;
}

.card-content {
	margin-bottom: 20rpx;
}

.data-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
	
	&:last-child {
		border-bottom: none;
	}
}

.data-icon {
	width: 50rpx;
	height: 50rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
	
	&.ph {
		background-color: rgba(74, 144, 226, 0.1);
	}
	
	&.temp {
		background-color: rgba(245, 166, 35, 0.1);
	}
	
	&.turbidity {
		background-color: rgba(126, 211, 33, 0.1);
	}
	
	&.oxygen {
		background-color: rgba(80, 227, 194, 0.1);
	}
}

.data-info {
	flex: 1;
}

.data-label {
	font-size: 24rpx;
	color: #666;
	margin-bottom: 5rpx;
	display: block;
}

.data-value {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
}

.data-status {
	padding: 6rpx 12rpx;
	border-radius: 15rpx;
	
	&.normal {
		background-color: #e8f5e8;
		color: #4cd964;
	}
	
	&.warning {
		background-color: #fff3e0;
		color: #f0ad4e;
	}
	
	&.error {
		background-color: #ffebee;
		color: #dd524d;
	}
}

.status-text {
	font-size: 20rpx;
}

.card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.update-time {
	font-size: 20rpx;
	color: #999;
}
</style>
